<template>
  <div>
    <div class="shopSouSuo">
      <el-row class="block-col-2">
        <!-- <el-col :span="12">
          <el-dropdown>
            <span class="el-dropdown-link">
              省份<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus">广东</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus"
                >北京</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-circle-plus-outline"
                >上海</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-check">江苏</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check"
                >浙江</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="13">
          <el-dropdown>
            <span class="el-dropdown-link">
              市<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus">广东</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus"
                >北京</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-circle-plus-outline"
                >上海</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-check">江苏</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check"
                >浙江</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="14">
          <el-dropdown>
            <span class="el-dropdown-link">
              区<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus">广东</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus"
                >北京</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-circle-plus-outline"
                >上海</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-check">江苏</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check"
                >浙江</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col> -->
        <el-button size="small" type="primary" @click="getShopByName(input1)"
          >搜索门店</el-button
        >
        <div>
          <el-input placeholder="请输入门店名称" v-model="input1">
          </el-input></div
      ></el-row>
    </div>
    <div class="shopData">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="offline_name" label="门店名称" width="180">
        </el-table-column>
        <el-table-column prop="city" label="城市" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="user_name" label="联系人" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="getId(scope.row.aid)"
              >修改门店负责人信息</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改门店负责人信息 -->
      <el-dialog
        :close-on-click-modal="false"
        title="修改门店负责人信息"
        :visible.sync="dialogFormVisible"
        width="500px"
      >
        <el-form :model="user">
          <el-form-item label="姓名">
            <el-input
              v-model="user.user_name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="user.phone" placeholder="请输入号码"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updated(aid)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        address: "",
        aid: "",
        city: "",
        district: "",
        latitude: "",
        longitude: "",
        offline_name: "",
        phone: "",
        province: "",
        user_name: "",
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      input1: "",
      tableData: [],
      aid: "",
    };
  },
  methods: {
    // 通过店名模糊查询
    getShopByName(offline_name) {
      this.$http.storeApi.queryLikeName({ offline_name }).then((res) => {
        this.tableData = res.data.data;
      });
    },
    // 获取修改项ID
    getId(aid) {
      this.dialogFormVisible = true;
      this.aid = aid;
    },
    // 修改门店负责人信息
    updated(aid) {
      this.$http.storeApi.queryById({ aid }).then((res) => {
        console.log(res);
        this.user.aid = aid;
        this.user.address = res.data.data[0].address;
        this.user.city = res.data.data[0].city;
        this.user.district = res.data.data[0].district;
        this.user.latitude = res.data.data[0].latitude;
        this.user.longitude = res.data.data[0].longitude;
        this.user.offline_name = res.data.data[0].offline_name;
        this.user.province = res.data.data[0].province;
        console.log(res.data.data[0]);
        this.$http.storeApi.update(this.user).then((res) => {
          if (res.data.code == 200) {
            this.$message({ type: "success", message: "修改成功" });
            this.getShop();
            this.dialogFormVisible = false;
          }
        });
      });
    },
    //加载所有门店信息
    getShop() {
      this.$http.storeApi.queryAll().then((res) => {
        this.tableData = res.data.data;
      });
    },
  },
  mounted() {
    this.getShop();
  },
};
</script>

<style lang="scss" scoped>
.shopSouSuo {
  border: 1px solid gray;
  margin-top: 50px;
  padding: 5px;
  padding-left: 100px;
}
.shopData {
  margin-top: 50px;
  border: 1px solid gray;
}
// 搜索框样式
.block-col-2 {
  display: flex;
  height: 40px;
  > button {
    margin-left: -90px;
    margin-right: 10px;
    height: 80%;
    margin-top: 5px;
  }
  > div {
    width: 50%;
  }
}
button {
  background: #010101 !important;
  border-color: #010101 !important;
}
</style>
